const { createApp } = Vue;

createApp({
    data() {
        return {
            // 主题相关
            currentTheme: 'light',
            themeButtonText: '🌙🌙 暗色模式',
            
            // 学习追踪相关
            studyHours: 0,
            studyGoal: 8,
            studyHistory: [],
            
            // 技能相关
            skills: [
                { id: 1, name: 'HTML5 & 语义化标签', level: 90, category: 'frontend', description: '熟练掌握HTML5新特性及可访问性最佳实践' },
                { id: 2, name: 'CSS3 & 布局（Flexbox, Grid）', level: 85, category: 'frontend', description: '响应式布局核心技能，能够实现复杂页面布局' },
                { id: 3, name: 'JavaScript 基础编程', level: 70, category: 'programming', description: 'ES6+新特性，异步编程，DOM操作' },
                { id: 4, name: 'Git 版本控制', level: 80, category: 'tools', description: '分支管理，团队协作，代码审查' },
                { id: 5, name: 'Vue.js 框架', level: 50, category: 'framework', description: '正在学习中，已了解基础概念和响应式原理' },
                { id: 6, name: 'React', level: 20, category: 'framework', description: '了解基本概念，计划下一步学习' }
            ],
            activeCategory: 'all',
            searchText: '',
            sortBy: 'level-desc',
            skillCategories: [
                { id: 'all', name: '全部技能' },
                { id: 'frontend', name: '前端技术' },
                { id: 'programming', name: '编程语言' },
                { id: 'tools', name: '开发工具' },
                { id: 'framework', name: '前端框架' }
            ],
            
            // 导航相关
            navItems: [
                { id: 'about', text: '关于我', href: '#about' },
                { id: 'skills', text: '我的技能', href: '#skills' },
                { id: 'projects', text: '我的项目', href: '#projects' }
            ],
            
            // 项目相关
            projects: [
                { 
                    id: 1, 
                    title: 'Vue.js个人简介网站（当前项目）', 
                    description: '使用Vue.js重构的个人主页，这是我学习Vue的第一个实践项目。',
                    techStack: 'Vue.js 3, HTML5, CSS3, JavaScript'
                },
                { 
                    id: 2, 
                    title: '待建项目：Vue.js待办事项应用', 
                    description: '计划使用Vue 3开发一个功能完整的待办事项应用。',
                    techStack: 'Vue.js 3, Composition API, LocalStorage'
                },
                { 
                    id: 3, 
                    title: '计划中：天气预报应用', 
                    description: '使用Vue和天气API开发一个简单的天气预报应用。',
                    techStack: 'Vue.js, REST API, 异步编程'
                }
            ]
        }
    },
    
    computed: {
        // 筛选和排序技能
        filteredSkills() {
            let filtered = [...this.skills];
            
            // 分类筛选
            if (this.activeCategory !== 'all') {
                filtered = filtered.filter(skill => skill.category === this.activeCategory);
            }
            
            // 搜索筛选
            if (this.searchText.trim()) {
                const keyword = this.searchText.toLowerCase();
                filtered = filtered.filter(skill => 
                    skill.name.toLowerCase().includes(keyword) ||
                    (skill.description && skill.description.toLowerCase().includes(keyword))
                );
            }
            
            // 排序
            filtered.sort((a, b) => {
                switch (this.sortBy) {
                    case 'level-desc':
                        return b.level - a.level;
                    case 'level-asc':
                        return a.level - b.level;
                    case 'name':
                        return a.name.localeCompare(b.name, 'zh-CN');
                    default:
                        return 0;
                }
            });
            
            return filtered;
        }
    },
    
    methods: {
        // 主题切换
        toggleTheme() {
            this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
            this.themeButtonText = this.currentTheme === 'dark' ? '☀️ 亮色模式' : '🌙 暗色模式';
            document.documentElement.setAttribute('data-theme', this.currentTheme);
            localStorage.setItem('theme', this.currentTheme);
        },
        
        // 技能筛选
        filterSkills(category) {
            this.activeCategory = category;
        },
        
        // 学习时长管理
        addStudyHour() {
            this.studyHours++;
            this.studyHistory.push({
                date: new Date().toLocaleTimeString(),
                hours: this.studyHours,
                type: '手动添加'
            });
            this.saveStudyData();
            console.log(`📚 学习时长增加: ${this.studyHours}小时`);
        },
        
        resetStudyHours() {
            this.studyHours = 0;
            this.studyHistory = [];
            this.saveStudyData();
            console.log('🔄 学习时长已重置');
        },
        
        setStudyGoal(hours) {
            this.studyGoal = parseInt(hours);
            this.saveStudyData();
            console.log(`🎯 学习目标设置为: ${hours}小时`);
        },
        
        // 数据持久化
        saveStudyData() {
            const data = {
                hours: this.studyHours,
                goal: this.studyGoal,
                history: this.studyHistory
            };
            localStorage.setItem('studyData', JSON.stringify(data));
        },
        
        loadStudyData() {
            const savedData = localStorage.getItem('studyData');
            if (savedData) {
                try {
                    const data = JSON.parse(savedData);
                    this.studyHours = data.hours || 0;
                    this.studyGoal = data.goal || 8;
                    this.studyHistory = data.history || [];
                    console.log('✅ 学习数据加载成功');
                } catch (error) {
                    console.error('❌ 加载学习数据失败:', error);
                }
            }
        },
        
        // 平滑滚动
        scrollToSection(sectionId) {
            const element = document.getElementById(sectionId);
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        },
        
        // 初始化主题
        initTheme() {
            const savedTheme = localStorage.getItem('theme');
            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
                this.currentTheme = 'dark';
                this.themeButtonText = '☀️ 亮色模式';
            } else {
                this.currentTheme = 'light';
                this.themeButtonText = '🌙 暗色模式';
            }
            
            document.documentElement.setAttribute('data-theme', this.currentTheme);
        },
        
        // 初始化技能动画
        initSkillAnimations() {
            this.$nextTick(() => {
                setTimeout(() => {
                    const progressBars = document.querySelectorAll('.skill-progress');
                    progressBars.forEach(bar => {
                        const level = bar.getAttribute('data-level');
                        bar.style.width = level + '%';
                    });
                }, 300);
            });
        }
    },
    
    mounted() {
        console.log('🎯 Vue.js个人简介网站已加载！');
        
        // 初始化功能
        this.initTheme();
        this.loadStudyData();
        this.initSkillAnimations();
        
        // 暴露到全局方便调试
        window.myVueApp = this;
        console.log('✅ Vue实例已暴露为 window.myVueApp');
    }
}).mount('#app');